<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import componentsIndex from './components/componentsIndex.vue';
import { getHomeBannerAPI } from '@/services/home';
import { onLoad } from '@dcloudio/uni-app';
import CategoryPanel from './components/CategoryPanel.vue';
import { getHomeCategoryAPI } from '@/services/home';
import HotPanel from './components/HotPanel.vue';
import { getHomeHotAPI } from '@/services/home';
import { XtxGuessInstance } from '@/type/components.d';
import pageHomeSK from './components/pageHomeSK.vue';



const bannerList = ref<bannerHome[]>([]);
const categoryList = ref<categoryHome[]>([]);
const hotList = ref<hotList[]>([]);
const guessRef = ref<XtxGuessInstance>();

// 获取轮播图的数据
const homeBanner = async () => {
  const res = await getHomeBannerAPI();
  // console.log(res);
  bannerList.value = res.result;
  // console.log(bannerList.value);

};

//获取中间导航栏的数据
const homeCategory = async () => {
  const res = await getHomeCategoryAPI();
  categoryList.value = res.result;
  // console.log(categoryList.value);
};

// 获取热门推荐的数据
const homeHot = async () => {
  const res = await getHomeHotAPI();
  hotList.value = res.result;
  // console.log(hotList.value);
};

// 滚动到底部加载更多
const onScrolltolower = () => {
  guessRef.value?.getMore();
};

//下拉刷新
// 关闭下拉刷新
const isTriggered = ref(false);
const onRefresherrefresh = async () => {
  isTriggered.value = true;
  //第一种写法，一个一个加载，效率不高
  // await homeBanner();
  // await homeCategory();
  // await homeHot();

  // 第二种写法，使用Promise.all并发加载，加载效率高
  guessRef.value?.resetData(); //重置数据
  await Promise.all([homeBanner(), homeCategory(), homeHot(), guessRef.value?.getMore()]);
  isTriggered.value = false;
};


//页面加载显示
const isShow = ref(false);


onLoad( async() => {
  isShow.value = true;
  //不写骨架屏正常请求
  // homeBanner();
  // homeCategory();
  // homeHot();
  // onScrolltolower();

  //使用骨架屏用promise请求数据
  await Promise.all([homeBanner(), homeCategory(), homeHot(), guessRef.value?.getMore()]);
  isShow.value = false;
});


</script>

<template>
  <view class="page">
    <!-- 头部模块 -->
    <view class="header-container">
      <componentsIndex />
    </view>
    <scroll-view scroll-y class="scroll-view" show-scrollbar="false" @scrolltolower="onScrolltolower"
      :refresher-triggered="isTriggered" refresher-enabled @refresherrefresh="onRefresherrefresh">
      <pageHomeSK v-if="isShow" />
      <template v-else>
        <!-- 轮播图模块 -->
        <XtxSwiper :bannerList="bannerList" />
        <!-- 中间导航栏模块 -->
        <CategoryPanel :categoryList="categoryList" />
        <!-- 热门推荐模块 -->
        <HotPanel :hotList="hotList" />
        <!-- 猜你喜欢模块 -->
        <XtxGuess ref="guessRef" />
      </template>
    </scroll-view>
  </view>
</template>



<style lang="scss">
.page {
  background-color: #f5f5f5;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.header-container {
  flex-shrink: 0;
  /* 头部不收缩 */
  background-color: white;
}

.scroll-view {
  flex: 1;
  /* 占满剩余空间 */
  height: 100%;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
</style>